<template>
  <div class="base-info">
    <a-modal
      v-model:visible="modalVisible"
      :mask-closable="false"
      width="800px"
      :title="props.title"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :model="form" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="value1" label="产品编号">
              <a-input @click="SelectProduct" v-model="form.number" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="value2" label="产品名称">
              <a-input v-model="form.name" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="value1" label="指导单价">
              <a-input-number
                :min="1"
                v-model="form.singlePrice"
                style="width: 400px"
              />
              <a-select
                :options="['人民币', '港币', '美金']"
                v-model="form.singleUint"
              />
              <!-- <a-input-group>
                <a-select
                  :options="['人民币', '港币', '美金']"
                  v-model="form.singleUint"
                />
                <a-input placeholder="second" />
              </a-input-group> -->
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="value2" label="产品规格">
              <a-input v-model="form.spec" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="value2" label="启用状态">
              <a-switch
                v-model="form.state"
                :checked-value="1"
                :unchecked-value="2"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item field="value1" label="是否需要认证">
              <a-radio-group v-model="form.isNeedAuth">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="2">否</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row> -->
      </a-form>
    </a-modal>

    <a-modal
      v-if="visible"
      width="80%"
      v-model:visible="SelectionVisible"
      @ok="SelectionHandleOk"
      :mask-closable="false"
    >
      <template #title> 物料产品选择 </template>
      <div class="container">
        <div class="content">
          <div class="search">
            物料名称：
            <a-input-search
              search-button
              @press-enter="tableRef.loadData()"
              style="width: 200px; margin: 0 20px"
              v-model="keyWord"
              @search="tableRef.loadData()"
            ></a-input-search>
            <a-space>
              <!-- <a-button

        >
          <template #icon>
            <icon-loop />
          </template>
          <template #default>重置</template>
        </a-button> -->
              <a-button
                type="outline"
                @click="
                  () => {
                    keyWord = '';
                    tableRef.loadData();
                  }
                "
              >
                <template #icon> <icon-refresh /> </template>重置</a-button
              >
            </a-space>
          </div>

          <tableTurn :table-data="getMaterialData" ref="tableRef" :args="args">
            <a-table-column :width="80" align="center">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
            </a-table-column>
            <a-table-column
              align="center"
              :width="200"
              title="物料编码"
              data-index="number"
            >
            </a-table-column>
            <a-table-column
              align="center"
              :width="150"
              title="物料名称"
              data-index="name"
            >
            </a-table-column>

            <a-table-column
              align="center"
              :width="150"
              title="规格型号"
              data-index="spec"
            >
            </a-table-column>
            <a-table-column
              data-index="basicName"
              align="center"
              :width="100"
              title="基本单位"
            >
            </a-table-column>

            <a-table-column
              align="center"
              :width="200"
              title="备注"
              data-index="remark"
            >
            </a-table-column>
          </tableTurn>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref, watchEffect } from 'vue';
  import { reactive, computed } from 'vue';
  import { cloneDeep } from 'lodash';
  import { GetMaterialList } from '@/api/inventory-management/material-management/index';

  const props = withDefaults(
    defineProps<{
      title: string;
      visible: boolean;
      detailInfo: any;
    }>(),
    {
      visible: false,
    }
  );
  const args = reactive({
    stripe: true,
    rowSelection: {
      type: 'radio',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    scroll: {
      y: 500,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'name', // 批量选择按钮 以合同名称来作为key
  });
  const emits = defineEmits(['update:visible', 'addgoods']);
  const SelectionVisible = ref(false);
  const tableRef = ref();

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emits('update:visible', visible);
    },
  });

  const handleCancel = () => {
    modalVisible.value = false;
  };

  let form = ref(cloneDeep(props.detailInfo));

  watchEffect(() => {
    if (modalVisible.value) form.value = cloneDeep(props.detailInfo);
  });

  const handleOk = async () => {
    if (props.title === '新增商品') {
      emits('addgoods', form.value, 'add');
    } else {
      emits('addgoods', form.value, 'edit');
    }

    modalVisible.value = false;
  };
  const keyWord = ref();
  // 获取物料列表数据
  const getMaterialData = async (pageData?: any) => {
    try {
      const data: any = {};
      if (keyWord.value) data.name = keyWord.value;
      const res = await GetMaterialList({ ...pageData, ...data });
      return Promise.resolve(res);
    } catch (error: unknown) {
      console.log(error);
    }
  };

  const SelectProduct = () => {
    SelectionVisible.value = true;
  };

  const SelectionHandleOk = () => {
    tableRef.value.selectedList[0].managementId =
      tableRef.value.selectedList[0].id;
    delete tableRef.value.selectedList[0].id;
    delete tableRef.value.selectedList[0].createdAt;
    delete tableRef.value.selectedList[0].updatedAt;
    Object.assign(form.value, tableRef.value.selectedList[0]);
  };
</script>

<style scoped lang="less">
  .base-info {
    padding: 0 40px;
  }

  .search {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }
</style>
